<template>
  <view class="store-wrap">
    <view class="block-title">门店列表</view>
    <ul class="block-list clearfix">
      <li
        v-for="(item, idx) in storeList"
        :key="idx"
        :class="[storeActive == idx ? 'active' : '']"
        @click="changeStore(idx, item.id)"
      >{{ item.store_name }}</li>
    </ul>
    <view class="block-title">餐桌列表</view>
    <ul class="block-list clearfix" v-if="tableList.length">
      <li
        v-for="(item, idx) in tableList"
        :key="idx"
        :class="[tableActive == idx ? 'active' : '']"
        @click="changeTable(idx, item.id)"
      >{{ item.table_number }}</li>
    </ul>
    <view v-else class="no-table">该门店下已无餐桌</view>
    <view class="uni-padding-wrap uni-common-mt btn-group">
      <view class="bind-info" v-if="bindInfo">该设备已经绑定 {{ bindInfo }} 餐桌</view>
      <button v-else-if="finished" class="btn-bind" type="primary" @click="bindDevice()">绑定设备</button>
      <button v-if="bindInfo" class="btn-bind btn-cancel" type="primary" @click="cancelBindDevice()">解除绑定</button>
      <button class="btn-bind btn-gohome" type="primary" @click="gotoHomePage()">返回首页</button>
    </view>
  </view>
</template>

<script>
import {
  STORE_LIST,
  STORE_TABLE_LIST,
  STORE_BIND_DEVICE,
  STORE_CANCEL_BIND_DEVICE,
  STORE_GET_INFO
} from "@/api";
export default {
  name: "StorePage",
  data() {
    return {
      storeList: [],
      storeId: 0,
      storeActive: 0,
      tableList: [],
      tableId: null,
      tableActive: 0,
      adminId: 3,
      deviceNum: "14aa3bed-1dc1-413f-c69e-0a9520ebe7fc",
      bindInfo: null,
      finished: false,
			admin_id: this.$store.state.admin_id,
    };
  },
  created() {
    this.getStoreList();
    this.getStoreInfo();
  },
  methods: {
    // 获取设备绑定的门店及餐桌
    getStoreInfo() {
      let that = this;
      //#ifdef APP-PLUS
      that.deviceNum = plus.device.uuid;
      //#endif
	  console.log(that.deviceNum)
      that.$_get(STORE_GET_INFO, { device_num: that.deviceNum }).then(res => {
        if (res.code === 1) {
          let storeConf = res.data
          that.$set(storeConf, 'device_num', that.deviceNum)
          that.$store.commit("storeConf", storeConf);
		  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaa',that.$store.state.storeConf.device_num)
          that.storeId = res.data.store_id;
          that.tableId = res.data.table_id;
          that.bindInfo = res.data.store_name + ' ' + res.data.table_number
        }
        that.finished = true
      });
    },
    // 获取门店列表
    getStoreList() {
      let that = this;
      that.$_get(STORE_LIST, { admin_id: that.admin_id }).then(res => {
        if (res.code === 1) {
          that.storeList = res.data;
          if (that.storeList.length) {
            that.storeId = that.storeList[0].id;
            that.getTableListByStoreId(that.storeId);
          }
        }
      });
    },
    // 获取门店下餐桌列表
    getTableListByStoreId(storeId) {
      let that = this;
      that.$_get(STORE_TABLE_LIST, { store_id: storeId }).then(res => {
        if (res.code === 1) {
          that.tableList = res.data;
          if (that.tableList.length) {
            that.tableId = that.tableList[0].id;
          }
        } else {
          that.tableId = null;
        }
      });
    },
    // 设备绑定
    bindDevice() {
      let that = this;
      if (!that.tableId) {
        that.$common.errorToShow("该门店下暂无桌号");
        return false;
      }
      let qsData = {
        store_id: that.storeId,
        table_id: that.tableId,
        device_num: that.deviceNum,
        device_num: that.deviceNum,
        admin_id: that.adminId
      };
      that.$_post(STORE_BIND_DEVICE, qsData, { isJson: false }).then(res => {
        if (res.code === 1) {
          let storeConf = res.data
          that.$set(storeConf, 'device_num', that.deviceNum)
          that.$store.commit("storeConf", storeConf);
          that.$common.successToShow('绑定设备成功', () => {
            uni.redirectTo({
              url: '/pages/index/index',
							// delta: 2,
							// animationType: 'slide-in-right',
							// animationDuration: 500,
							complete: function(r) {
							console.log(JSON.stringify(r))
							}
            })
          });
        } else {
          that.$common.modelShow("提示", res.msg, () => {}, false);
        }
      });
    },
    // 解除绑定
    cancelBindDevice () {
       let that = this;
       let qsData = {
        store_id: that.storeId,
        table_id: that.tableId,
        device_num: that.deviceNum,
				admin_id: that.admin_id
      };
      that.$common.modelShow('解绑提示', '确认要解绑该设备?', function() {
        that.$_get(STORE_CANCEL_BIND_DEVICE, qsData, { isJson: false }).then(res => {
          if (res.code === 1) {
            that.$store.commit("storeConf", '');
            that.$store.commit("setkeywords", '');
            that.$store.commit("SET_CARTNUM", 0);
            that.$store.commit("SET_INTEGRALCARTNUM", 0);
            that.$storage.clear()
            that.$common.successToShow("解绑设备成功");
            that.$common.navigateTo("/pages/store/login");
          } else {
            that.$common.modelShow("提示", res.msg, () => {}, false);
          }
        });
      })
    },
    // 选择门店
    changeStore(idx, id) {
      this.storeActive = idx;
      this.storeId = id;
      this.getTableListByStoreId(id);
      this.tableActive = 0;
    },
    // 选择餐桌
    changeTable(idx, id) {
      this.tableActive = idx;
      this.tableId = id;
    },
    // 返回首页
    gotoHomePage() {
      this.$common.navigateTo("/pages/index/index");
    }
  }
};
</script>

<style lang="scss" scoped>
.store-wrap {
  padding: 30px;
  box-sizing: border-box;
  width: 100%;
}
.block-title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 1vw;
}
.block-list {
  list-style: none;
  padding-left: 0;
  font-size: 0;
  margin-bottom: 3vw;
  li {
    list-style: none;
    display: inline-block;
    margin-right: 15px;
		margin-bottom: 15px;
    vertical-align: top;
    padding: 6px 12px;
    color: #fff;
    border: 1px solid #ccc;
    font-size: 15px;
    &.active {
      background-color: #fff;
      color: #000;
    }
  }
}

.btn-group {
  margin-top: 5vw;
  .btn-bind {
    width: 50%;
    display: block;
    background-color: #c9ab6f;
  }
  .btn-cancel{
    margin-top: 2vw;
    background-color: #dd4b39;
    color: #fff;
  }
  .btn-gohome {
    margin-top: 2vw;
    background-color: transparent;
    color: #c9ab6f;
    border: 1px solid #c9ab6f;
  }
}
.no-table {
  font-size: 15px;
  color: #fff;
}
.bind-info{
  text-align: center;
  font-size: 18px;
  color: #fff;
}
</style>
